<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
    class Stack {
        constructor() {
            this.items = [];
        }
    
        // 添加一个新元素到栈顶
        push(element) {
            this.items.push(element);
        }
    
        // 移除并返回栈顶元素
        pop() {
            if (this.isEmpty()) {
                return null; // 或抛出错误
            }
            return this.items.pop();
        }
    
        // 返回栈顶元素但不移除它
        peek() {
            if (this.isEmpty()) {
                return null; // 或抛出错误
            }
            return this.items[this.items.length - 1];
        }
    
        // 检查栈是否为空
        isEmpty() {
            return this.items.length === 0;
        }
    
        // 返回栈的大小
        size() {
            return this.items.length;
        }
    
        // 清空栈
        clear() {
            this.items = [];
        }
    }
    
    // 使用示例
    const stack = new Stack();
    stack.push(10);
    stack.push(20);
    stack.push(30);
    console.log(stack.peek()); // 输出: 30
    console.log(stack.pop());   // 输出: 30
    console.log(stack.size());  // 输出: 2
    console.log(stack.isEmpty()); // 输出: false
    stack.clear();
    console.log(stack.isEmpty()); // 输出: true</script>
</body>
</html>